<template>
  <!-- 组件外部的 form-item -->
  <div style="z-index: 100; border: 1px solid #ccc; width: 100%">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor
      :style="{ height: props.height + 'px', overflowY: 'hidden' }"
      v-model="content"
      :defaultConfig="editorConfig"
      :mode="props.mode"
      @onCreated="handleCreated"
    />

    <a-modal
      style="z-index: 1000"
      v-model:visible="resourceVisible"
      :render-to-body="false"
      :width="1080"
      :footer="false"
      draggable
    >
      <template #title>资源选择器</template>
      <ma-resource v-model="list" multiple ref="resource" returnType="url" />
    </a-modal>
  </div>
</template>

<script setup>
import "@wangeditor/editor/dist/css/style.css"
import MaResource from "@cps/ma-resource/index.vue"
import { onBeforeUnmount, ref, shallowRef, watch, computed } from "vue"
import { Boot } from "@wangeditor/editor"
import { Editor, Toolbar } from "@wangeditor/editor-for-vue"
import { useAppStore } from "@/store"
import { uploadRequest } from "@cps/ma-upload/js/utils"
import tool from "@/utils/tool"
import uploadConfig from "@/config/upload"

const resourceVisible = ref(false)
const appStore = useAppStore()

const props = defineProps({
  modelValue: { type: String },
  component: Object,
  height: { type: Number, default: 300 },
  mode: { type: String, default: "default" },
  customField: { type: String, default: undefined }
})

const emit = defineEmits(["update:modelValue", "change"])

const registerWangEditorButtonFlag = appStore.appCurrentSetting.registerWangEditorButtonFlag

const list = ref([])
const resource = ref()

const content = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit("update:modelValue", value)
  }
})

watch(
  () => content.value,
  (vl) => emit("change", vl)
)

watch(
  () => list.value,
  (imgs) => {
    const tmp = ""
    imgs.map((img) => {
      if (
        img.indexOf(".jpg") > -1 ||
        img.indexOf(".png") > -1 ||
        img.indexOf(".bmp") > -1 ||
        img.indexOf(".jpeg") > -1 ||
        img.indexOf(".svg") > -1 ||
        img.indexOf(".gif") > -1
      ) {
        const node = {
          type: "image",
          src: img,
          href: "",
          alt: "",
          style: {},
          children: [{ text: "" }]
        }
        editorRef.value.insertNode(node)
      }
    })

    resource.value.clearSelecteds()
    resourceVisible.value = false
  }
)

const editorRef = shallowRef()

const toolbarConfig = {}
toolbarConfig.excludeKeys = ["group-video", "insertImage"]

class MyButtonMenu {
  constructor() {
    this.title = "资源选择器"
    this.tag = "button"
  }

  //  获取菜单执行时的 value ，用不到则返回空 字符串或 false
  getValue(editor) {
    return ""
  }

  //  // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
  isActive(editor) {
    return false
  }

  // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
  isDisabled(editor) {
    return false
  }

  // 点击菜单时触发的函数
  exec(editor, value) {
    editor.emit("click_menu")
  }
}

const menu1Conf = {
  key: "menu1", // 定义 menu key ：要保证唯一、不重复（重要）
  factory() {
    return new MyButtonMenu()
  }
}

if (registerWangEditorButtonFlag === undefined || registerWangEditorButtonFlag === false) {
  Boot.registerMenu(menu1Conf)

  appStore.setRegisterWangEditorButtonFlag(true)
}

toolbarConfig.insertKeys = {
  index: 1, // 插入的位置，基于当前的 toolbarKeys
  keys: ["menu1"]
}

const editorConfig = {
  placeholder: "请输入内容...",
  MENU_CONF: {},
  hoverbarKeys: {
    // 在编辑器中，选中链接文本时，要弹出的菜单
    link: {
      menuKeys: [
        // 默认的配置可以通过 `editor.getConfig().hoverbarKeys.image` 获取
        "imageWidth30",
        "imageWidth50",
        "imageWidth100",
        "|", // 分割符
        "imageFloatNone", // 增加 '图片浮动' 菜单
        "imageFloatLeft",
        "imageFloatRight",
        "|", // 分割符
        "editImage",
        "viewImageLink",
        "deleteImage"
      ]
    }
  }
}

editorConfig.MENU_CONF["uploadImage"] = {
  async customUpload(file, insertFn) {
    uploadRequest(file, "image", "uploadImage").then((res) => {
      insertFn(tool.attachUrl(res.url, uploadConfig.storageMode[res.storage_mode]))
    })
  }
}

const handleCreated = (editor) => {
  editorRef.value = editor

  editorRef.value.on("click_menu", () => {
    resourceVisible.value = true
  })
}

onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
</script>

<style scoped></style>
